<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>store.js插件--本地存储</title>

    <style>
        *{
            margin: 0 auto;
            padding: 0 auto;
        }

    </style>

</head>
<body>
    
    <!-- <script src="../js/store.min.js"></script> -->
    <script src="../js/store.legacy.min.js"></script>

    <script>
        
        /**
        * store.js的使用教程
        *   参考的学习链接:
        *       1、https://blog.csdn.net/xfcy514728/article/details/80278048
        *       2、https://blog.csdn.net/xw505501936/article/details/48027243
        *   GitHub上的链接：
        *       1、https://github.com/marcuswestin/store.js
        *   注意：【以下异常，因为引入的文件是：store.min.js】
        *       1、使用CDN形式引入store.js类库时，使用clearAll()函数清除所有的本地缓存会抛出异常，需要修改成clear()函数实现本地缓存的所有缓存都删除【只测试过CDN方式引入store.js】
        *       2、使用CDN形式引入store.js类库时，使用each()函数便利所有的本地缓存时，会抛出异常，修改成forEach()函数可以成功实现本地缓存的遍历【只测试过CDN方式引入store.js】
        */
        console.log();
        //1、 创建一个存储变量
        store.set('user',{
            name:'chen'
        });

        store.set('Age',{
            age:'18'
        });

        store.set('Like',{
            like:'play'
        });

        //2、获得本地存储的变量信息
        let user = store.get('user');
        console.log(user);

        console.log(store.get('Age'));

        console.log('------3、删除本地缓存信息-----');
        //3、删除本地缓存信息
        store.remove('Age');
        console.log(store.get('user'));
        console.log(store.get('Age'));

        //4、删除所有的本地缓存信息
        // store.clear();  //【引入文件：store.min.js】
        store.clearAll();  
        console.log(store.get('user'));
        console.log(store.get('Age'));
        console.log(store.get('Like'));


        store.set('user1',{
            name:'chenyq'
        });

        store.set('Like1',{
            like:'play'
        });

        store.set('Age1',{
            age:'18'
        });
        //5、each()函数变量循环本地缓存
        store.each(function(value,key){ 
        // store.forEach(function(value,key){ // 【引入文件：store.min.js】使用forEach()函数实现本地缓存的遍历
            console.log('value: ' + value);
            console.log('key: ' + key + ';');
        });

        //获得对象下的值
        console.log(store.get('user1').name);



    </script>

</body>
</html>